/**地图主体*****************************************************************************/
var myChartMap = echarts.init(document.getElementById('map'));
myChartMap.setOption({
	title : {
		text : '数据可视化地图',
		text:'',
		left : 150,
		top : 20,
		subtext : '',
		textStyle : {
			color : '#fff',
			fontSize : 25
		}
	},
	amap : {
		maxPitch : 60,//最大俯仰角度
		pitch : 30, //俯仰角
		viewMode : '3D',
		zoom : 11,
		//showLabel:false,//是否显示图层标注信息
		expandZoomRange : true,
		zooms : [ 3, 13 ],//可缩放的范围，太大的话有可能会造成图例变形
		//zooms:[3,20],
		//mapStyle : 'amap://styles/darkblue', //地图主题
		mapStyle : 'amap://styles/11200e517fcb6e2a55bf31dbb36c024f',
		center : [ 116.277206,40.000664 ], //中心点
		rotation : 0, //顺时针旋转角度
		resizeEnable : true
	},
	animation : false,
	series : []
});

//上面的部分是echarts的配置，需要注意的是高德使用amap，百度地图使用bmap，这里的配置就是针对 高德地图 的配置了，
var map = myChartMap.getModel().getComponent('amap').getAMap();
var layer = myChartMap.getModel().getComponent('amap').getLayer();

/**添加2D工具条*/
/*AMap.plugin([ "AMap.ToolBar" ], function() {
	map.addControl(new AMap.ToolBar());
});*/

/**添加3D工具条*/
AMap.plugin([ "AMap.ControlBar" ], function() {
	var bar = new AMap.ControlBar({
		position : {
			top : '10%',
			left : '-2%',
		}
	});
	map.addControl(bar);
});

/**绘制各类标志覆盖物（图片）*/
function drawMarkers(map, lnglat, img){
	var marker = new AMap.Marker({
		position : new AMap.LngLat(lnglat[0],lnglat[1]),
		icon : new AMap.Icon({
			size : new AMap.Size(50, 50),
			image : img
		}),
		//offset: new AMap.Pixel(-20, -13)
	});
	map.add(marker);
}

AMap.event.addListener(map, 'zoomend', function() {
	console.log('当前缩放级别：' + map.getZoom());
});
/************************************************************************************/

/**海淀区边界高亮***********************************************************************/
var district = null;
var polygons = [];

/**生成行政区划多边形polygon*/
function createPolygon(polygons,bounds){
	if (bounds) {
		for (var i = 0, l = bounds.length; i < l; i++) {
			var polygon = new AMap.Polygon({
				strokeWeight : 2.5,//线条的粗细
				path : bounds[i],//轮廓节点坐标数组
				fillOpacity : 0,//填充区域透明度
				fillColor : '#80d8ff',//填充区域颜色
				strokeColor : '#0091ea',//线条颜色
				bubble:true, //是否将覆盖物的鼠标或touch等事件冒泡到地图上
				draggable:false //设置多边形是否可拖拽移动
			});
			polygons.push(polygon);
		}
	}
}

/**绘制区域边界线*/
function drawBounds(disLevel,localDis) {
	//加载行政区划插件
	if (!district) {
		//实例化DistrictSearch
		var opts = {
				subdistrict : 0, //0表示获取边界不需要返回下级行政区
				extensions : 'all', //返回行政区边界坐标组等具体信息
				level : 'district' //查询行政级别为 市
		};
		district = new AMap.DistrictSearch(opts);
	}
	//行政区查询
	district.setLevel(disLevel);
	district.search(localDis, function(status, result) {
		map.remove(polygons)//清除上次结果
		var bounds = result.districtList[0].boundaries;//所查询的行政区边界,街镇一级的没有边界数据
		createPolygon(polygons,bounds);
		map.add(polygons);//绘制边界区域
//		draw3DArea(bounds);//绘制3D立体区域
//		map.setZoom(11.4);//需要调用方法使地图缩放，否则会导致初始状态下不显示动态线条等效果
	});
}

/**生成3D立体区域*/
function draw3DArea(bounds){
	map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.9);
	map.DirectionLight = new AMap.Lights.DirectionLight([0, -1, 1], [1, 1, 1], 0.1);
	var object3Dlayer = new AMap.Object3DLayer();
	map.add(object3Dlayer);
	var height = 10000;
	var color = '#0091ea';//rgba
	var prism = new AMap.Object3D.Prism({
		path:bounds,
		height:height,
		color:color
	});
	object3Dlayer.add(prism);//添加
}

/**创建Object3DLayer图层来绘制3D模型*/
// 参考：https://lbs.amap.com/api/javascript-api/guide/object3d/3d-gltf
// gltf文件生成工具地址：https://lbs.amap.com/dev/tool/gltf
function draw3DLayer(jsonFile,map){
	var object3Dlayer = new AMap.Object3DLayer();
	map.add(object3Dlayer);
	
	$.get(jsonFile,function(data){
		$.each(data.models,function(i,item){
			var lng = item.lnglat.split(',')[0];
			var lat = item.lnglat.split(',')[1];
			map.plugin(["AMap.GltfLoader"], function () {
				var urlDuck = item.path;
				var paramDuck = {
						position: new AMap.LngLat(lng,lat), // 必填参数，用于设置模型加载位置
						scale: 100, // 缺省值 1，用于设置模型缩放倍数
						height: 0,  // 缺省值 0，用于设置模型位置高度
						scene: 0, // 缺省值 0，用于设置加载场景序号
				};
				
				var gltfObj = new AMap.GltfLoader();
				
				gltfObj.load(urlDuck, function (gltfDuck) {
					gltfDuck.setOption(paramDuck);
					// rotateX(Number)、rotateY(Number)、rotateZ(Number) 方法用于设置模型旋转角度
					gltfDuck.rotateX(0); 
					gltfDuck.rotateY(0);
					gltfDuck.rotateZ(0);
					object3Dlayer.add(gltfDuck);
				});
			});
		});
	});
}
/*******************************************************************************************/

/**加载山区形状********************************************************************************/
function drawMountain(jsonFile,series){
	$.get(jsonFile, function(data) {
		var mountainData = [];
		$.each(data,function(i,item){
			mountainData.push({value:item});
		});
		series.push(
				{
					name : '百望山',
					coordinateSystem : "amap",
					type : "scatter",//散点“气泡”图
					zlevel : 1,
					symbol : "triangle",
					symbolSize: 10,
					silent:true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
					progressiveThreshold: 300, //启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染
					progressive: 100, //渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置
					itemStyle:{
						color:'#2186a3',
						opacity:0.3 //设置透明度，如果需要颜色渐变，则把json文件中的指定坐标多复制几个实现叠加变亮的效果
					},
					label:{
						show:false,
						//show:true,//显示信息，调试时可以用来显示坐标使用
						position:'top',
						formatter:'{c}'
					},
					data : mountainData
				}
		);
	});
}
/**********************************************************************************************/

/**读取json文件生成飞线数据**********************************************************************/
var series = [];
var toPlaceName;//终点名称
var toPlaceLnglat;//终点坐标
function drawFlyingLines(jsonFile,series){
	$.get(jsonFile,function(data){
		toPlaceName = data.toPlace[0].name;
		toPlaceLnglat = data.toPlace[0].lnglat;
		$.each(data.fromPlace,function(i, item){
			//循环添加每一条线条
			series.push(
					{
						name : item.name,
						coordinateSystem : "amap",
						type : "lines",
						zlevel : 1,
						effect : {
							show : true,
							//period : i%2==0?(i*2+5):(i*2+10), //小圆点移动的速度
							period : item.speed,
							trailLength : 0.7,
							color : "#fff",
							symbolSize : 3 //小圆点的大小
						},
						lineStyle : {
							normal : {
								color : "#fff",
								width : 0, //线条的宽度
								curveness : 0.3 //小圆点的轨迹弯曲程度，与箭头弯曲程度一致即可实现重叠的效果
							}
						},
						data : [ {
							fromName : item.name,
							toName : toPlaceName,
							coords : [ item.lnglat, toPlaceLnglat],
						} ]
					},
					{
						name : item.name,
						coordinateSystem : "amap",
						type : "lines",
						zlevel : 2,
						//symbol : [ "none", "circle" ],
						symbol : [ "none", "image:/static/admin/images/datamap/point.png" ],
						symbolSize: 13,
						lineStyle : {
							normal : {
								color : "#f7c60c",
								width : 1,
								opacity : 0.6,
								curveness : -0.3//箭头的弯曲程度，与小圆点轨迹弯曲程度一致即可实现重叠的效果
							}
						},
						label:{
							show:true,
							formatter:'{c}'
						},
						data : [ {
							fromName : item.name,
							toName : toPlaceName,
							coords : [ toPlaceLnglat,item.lnglat ],
							value: item.name
						} ]
					}
			);
		});
		//线条的终点圆点+信息框
		var t = '\t\t\t\t'; //空格符
		var msg = '{a}\n\n金额总数'+t+t+'2402亿元\n\n项目总数'+t+'16222402个'; //交易总金额和项目总数的信息框
		series.push(
				{
					"name" : toPlaceName,
					"type" : "effectScatter", //涟漪特效
					"coordinateSystem" : "amap",
					"zlevel" : 2,
					"symbol":"circle", // 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
					//"symbol":"image//:./images/tradeCenter.png",
					"symbolSize":20, //标记的大小
					"rippleEffect" : {
						"brushType" : "stroke",
						"scale": "3" //动画中波纹的最大缩放比例
					},
					"label" : {
						"normal" : {
							"show" : true,
							"color":"rgb(206,219,238)",
							"padding":5,
							"position" : "top",
							"distance":8,
							"backgroundColor":"rgba(4,12,72,0.5)",
							"formatter" : msg,
							"borderWidth":2,
							"borderColor":"#3077aa"
						}
					},
					"itemStyle" : {
						"normal" : {
							"color" : "#43f6fb"
						}
					},
					"data" : [ {
						"name" : toPlaceName,
						"value" : toPlaceLnglat
					}]
				});
	});
}
/***********************************************************************************************/

/**加载两轴一带线路*****************************************************************************/
/**
 * 							(north)
 * 							   ↑
 * 							   *
 * 							   *			
 * 					 			*				
 * 		(north-west)←******(top-center)******→(north-east)
 *                     			 *
 *                     			  *
 *                     			   *(center)
 *                     			   *
 *                     			  *
 *      (south-west)←******(bottom-center)******→(south-west)
 *                     			  * 
 *                    			 *
 *                   		     * 
 *                               ↓
 *                            (south)
 * 
 */
function drawRiverRoads(jsonFile,series){
	$.get(jsonFile, function(data){
		$.each(data.paths, function(i, item){
			series.push(
					{
						name : item.fromName+"To"+item.toName,
						coordinateSystem : "amap",
						type : "lines",
						zlevel : 2,
						symbol : [ "circle", "none" ],
						symbolSize: 20,
						silent:true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
						effect:{
							show:true,
							constantSpeed:30,
							symbol:'circle',//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
							symbolSize:23,
							trailLength:0.5
						},
						lineStyle : {
							normal : {
								color : "#40cedc",
								width : 20,
								opacity : 0.9,
								curveness : item.curveness//箭头的弯曲程度，与小圆点轨迹弯曲程度一致即可实现重叠的效果
							}
						},
						data : [ {
							fromName : item.fromName,
							toName : item.toName,
							coords : [ data.lnglat[item.fromName],data.lnglat[item.toName] ],
						} ]
					}
			);
		});
		$.each(data.showArrow,function(i,item){
			for(name in item){
				if(item[name]){//遍历将结果为true的显示箭头
					series.push(
							{
								"name" : name,
								"type" : "effectScatter", //涟漪特效
								"coordinateSystem" : "amap",
								"zlevel" : 2,
								"symbol":"arrow", // 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
								//"symbol":"image//:./images/tradeCenter.png",
								"symbolSize":20, //标记的大小
								"symbolOffset":item['offset'],//偏移量
								"symbolRotate":item['rotate'],//旋转角度
								"rippleEffect" : {
									"brushType" : "fill",
									"scale": "2.5" //动画中波纹的最大缩放比例
								},
								"itemStyle" : {
									"normal" : {
										"color" : "#43f6fb"
									}
								},
								"data" : [ {
									"name" : name,
									"value" : data.lnglat[name]
								} ]
							});
				}
			}
		});
	});
}
/**********************************************************************************************/

/**加载动态散点图标*****************************************************************************/
function drawScatters(jsonFile,series){
	$.get(jsonFile, function(data) {
		var hStep = 300 / (data.length - 1);
		var scatters = [].concat.apply([], data.map(function (scatter, idx) {
			var prevPt;
			var points = [];
			for (var i = 0; i < scatter.length; i += 2) {
				var pt = [scatter[i], scatter[i + 1]];
				if (i > 0) {
					pt = [
					      prevPt[0] + pt[0],
					      prevPt[1] + pt[1]
					      ];
				}
				prevPt = pt;
				points.push([pt[0] / 1e4, pt[1] / 1e4]);//1e4=1*10^4=10000
//				if((parseFloat(points[0][0]) >= parseFloat(116.253377)) && (parseFloat(points[0][0]) <= parseFloat(116.3944)) && (parseFloat(points[0][1]) >= parseFloat(39.899131)) && (parseFloat(points[0][1]) <= parseFloat(40.132015))){
//					if((parseFloat(points[points.length-1][0]) >= parseFloat(116.253377)) && (parseFloat(points[points.length-1][0]) <= parseFloat(116.3944)) && (parseFloat(points[points.length-1][1]) >= parseFloat(39.899131)) && (parseFloat(points[points.length-1][1]) <= parseFloat(40.132015))){
//						console.log(idx+":["+scatter+"]");//将输出的结果保存后使用正则表达式将  ]\r\n\w(.+):  替换为  ],\r\n 
//						return;
//					}
//				}
			}
			var random = Math.round(Math.random() == 1 ? Math.random() * 3 : Math.random() * 4);
			randomSize = [3,5,7,9][random];//设置气泡大小从这个数组中取值
			return {
				coords: points,
				lineStyle: {
					normal: {
						color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))//控制所有线条的颜色随机
					}
				},
				effect:{
					symbolSize: randomSize //使图标的大小为数组中的随机数
				}
			};
		}));
		series.push({
			"type": "lines",
			"coordinateSystem": "amap",
			"polyline": true,
			"data": scatters,
			"silent": true,
			"lineStyle": {
				"normal": {
					// color: '#c23531',
					// color: 'rgb(200, 35, 45)',
					"opacity": 0.2,
					"width": 1
				}
			},
			"progressiveThreshold": 500, //启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染
			"progressive": 200 //渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置
		}, {
			"type": "lines",
			"coordinateSystem": 'amap',
			"polyline": true,
			"data": scatters,
			"lineStyle": {
				"normal": {
					"width": 0
				}
			},
			"effect": {
				"constantSpeed": 10,
				"show": true,
				"trailLength": 0.5,
				'symbol':'circle'
			},
			"zlevel": 2
		});
	});
}
/***********************************************************************************************/

/**数据展示区域********************************************************************************/
var app = {};
option = null;
app.title = '环形图';
//Echarts调色盘颜色列表，依次循环从该列表中取颜色作为系列颜色
var dataContainerColor = [ '#5250fc', '#7be26c', '#df507e', '#fcea40', '#04d3db', '#c23531', '#2f4554', '#61a0a8', 
                           '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3' ];
var category = [ {
	name : '政府采购',
	value : 735
}, {
	name : '小型工程',
	value : 310
}, {
	name : '房屋建筑',
	value : 234
}, {
	name : '市政工程',
	value : 135
}, {
	name : '园林工程',
	value : 548
}, {
	name : '水利工程',
	value : 200
} ];

/**显示数据实时刷新效果*/
var i = 0;
function showData(){
	$('.t-value td:eq(0)').text(i+5);
	$('.t-value td:eq(1)').text(i+23);
	$('.t-value td:eq(2)').text(i+44);
	$('.t-value td:eq(3)').text(i+100);
	$('.t-value td:eq(4)').text(i+117);
	$('.t-value td:eq(5)').text(i+60);

	i += 2;
	if(i>=100){
		i = 0;
		showData();
	}
}

/**显示项目分类数据*/
function showProjectsCategory(){
	//为了防止视觉上看到显示项目分类数据先显示出来，文本都在此处直接添加，与其他元素同步加载显示
	$('#projects-category-title').html('项目分类');
	$.each(category,function(i,item){
		$('.t-value td:eq('+i+')').html(category[i].value);
		$('.t-name td:eq('+i+')').html(category[i].name);
	});
	//setInterval(showData,1000);//每隔1秒更新数据
}

/**绘制饼状图表*/
function drawPie(category){
	var option = {
			color : dataContainerColor,
			title : {
				text : '交易金额',
				textStyle : {
					color : '#FFF'
				},
				top : 0,
				left : 0
			},
			tooltip : {//提示信息
				trigger : 'item',
				//position:['50%', '50%'],
				formatter : "{b}<br/>{c}亿元<br/>({d}%)"
			},
			legend : {//图例组件
				orient : 'vertical',//图例列表的布局朝向
				x : 'right',
				y : 'center',
				textStyle : {
					color : '#FFF'
				},
				itemGap : 15,//图例每项之间的间隔
				itemWidth : 10,//图例标记的图形宽度
				itemHeight : 10,//图例标记的图形高度
				data : category
			},
			tooltip:{
				show:true, //鼠标悬停是否显示信息
				formatter:"{b}<br/>{c}亿元({d}%)"
			},
			series : [ {
				name : '项目类型',
				type : 'pie',
				radius : [ '50%', '70%' ],
				avoidLabelOverlap : false,
				clockwise: false,//为true表示顺时针显示
				label : {
					normal : {
						show : false,
						position : 'center',
						formatter : "{b}\n{c}亿元\n({d}%)"
					},
					emphasis : {
						show : true,
						textStyle : {
							fontSize : '15',
							fontWeight : 'normal'
						}
					}
				},
				labelLine : {
					normal : {
						show : true,
					}
				},
				data : category
			} ]
	};
	return option;
}

/**显示交易金额饼图*/
function showTradeAmount(option){
	var tradeAmountDom = document.getElementById("trade-amount");
	var myChartTradeAmount = echarts.init(tradeAmountDom);
	option = drawPie(category);
	if (option && typeof option === "object") {
		myChartTradeAmount.setOption(option, true);
	}
}

/**显示交易数量饼图*/
function showTradeNum(option){
	var tradeNumDom = document.getElementById("trade-num");
	var myChartTradeNum = echarts.init(tradeNumDom);
	option = drawPie(category);
	if (option && typeof option === "object") {
		myChartTradeNum.setOption(option, true);
	}
}

/**显示交易数据图表信息*/
function showTradeDatas(option){
	$('#data-container').show();
	showProjectsCategory();//显示项目分类数据
	showTradeAmount(option);//显示交易金额
	showTradeNum(option);//显示交易数量
}
/**********************************************************************************************/

/**调用所有函数显示*/
drawBounds('district','海淀区'); // 绘制海淀区边界
drawMountain('/static/admin/json/mountain.json',series); // 绘制山体图案
drawMarkers(map,[116.300734,39.994325],'/static/admin/images/datamap/beijing-university.jpeg'); // 绘制北京大学图片标志
draw3DLayer('/static/admin/json/3DModels.json',map); // 加载3D模型
drawFlyingLines('/static/admin/json/flyingLines.json',series); // 绘制飞线动效
drawScatters('/static/admin/json/scatters.json',series); // 绘制动态散点图标
drawRiverRoads('/static/admin/json/line-river.json',series); // 绘制两轴一带河流动效
//showTradeDatas(option); // 显示交易图表数据信息

map.setZoom(11.2);//需要调用方法使地图缩放，否则会导致初始状态下不显示动态线条等效果

/**鼠标点击获取经纬度坐标*/
map.on('click', function(e) {
	document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});

/**选择查看哪种特效*/
$('#select').change(function(){
//	map.clearMap(); // 这两个函数暂时还不行
//	myChartMap.clear();
	switch(parseInt($('#select').val())){
		case 1:
			drawBounds('district','海淀区');// 绘制海淀区边界
			break;
		case 2:
			drawMountain('./data/json/mountain.json',series);// 绘制山体图案
			break;
		case 3:
			drawMarkers(map,[116.300734,39.994325],'images/beijing-university.jpeg');// 绘制北京大学图片标志
			break;
		case 4:
			draw3DLayer('./data/json/3DModels.json',map); // 加载3D模型
			break;
		case 5:
			drawFlyingLines('./data/json/flyingLines.json',series); // 绘制飞线动效
			break;
		case 6:
			drawScatters('./data/json/scatters.json',series); // 绘制动态散点图标
			break;
		case 7:
			drawRiverRoads('./data/json/line-river.json',series); // 绘制两轴一带河流动效
			break;
		case 8:
			showTradeDatas(option); // 显示交易图表数据信息
			break;
	}
	map.setZoom((map.getZoom()>=11.5)?(map.getZoom()-0.1):(map.getZoom()+0.1));
});

myChartMap.setOption({
	series : series
});

//下面是确保高德地图渲染的时候，echarts同时也需要再次渲染一次，保持位置的同步
layer.render = function() {
	myChartMap.setOption({
		series : series
	});
}
